import { ThemeColorEnum } from "@/config";
import { useProjectStore } from "@/store/modules/projectStore";
import { computed, watch } from "vue";

export default function useThemeColor() {

  let useProject = useProjectStore();

  let themeColor = computed(() =>  useProject.themeColor);
  watch([themeColor],(newV,oldV)=>{
    let el = document.getElementById("app");
    if (el) {
      let val = newV[0] ?? oldV[0]
      if (val === ThemeColorEnum.DARK) {
        el.classList.add(ThemeColorEnum.DARK);
      } else {
        el.classList.remove(ThemeColorEnum.DARK);
      }
    }
  },{
    immediate:true
  })


  function setThemecolor(val: ThemeColorEnum) {
    useProject.setThemeColor(val);
  }

  return {
    themeColor,
    setThemecolor,
  };
}
